<template>
	<div class="root">
		<header>
			<div class="blur" :style="{backgroundImage: 'url('+imgsrc+'thumbnail/!40p/blur/50x40/)'}">
			</div>
			<div class="htop">
				<img :src="imgsrc" />
				<div class="htit">
					<p class="name">{{shops.name}}</p>
					<router-link :to="'/shop/deti/'+id">
						<p class="deli fix">
							<span v-if="shops.delivery_mode">{{shops.delivery_mode.text}}</span>
							<span v-else>商家配送</span> /
							<span>{{shops.order_lead_time}}分钟送达</span> /
							<span>配送费￥{{shops.float_delivery_fee}}</span>
							<span class="r" style="padding-right: 10px; font-size: 1rem;"> &gt;</span>
						</p>
					</router-link>
					<p v-if='shops.promotion_info' class="info">
						公告：{{shops.promotion_info}}
					</p>
				</div>
			</div>
			<p class="activitie fix">

				<span class="act">					
					<i class="icname">{{act.icon_name}}</i>
					{{act.description}}
					</span>

				<span class="r" style="padding-right: 20px;">{{num}}个活动 &gt;</span>
			</p>
		</header>

		<tab active-color='#3190e8' defaultColor='#000' bar-active-color="#3190e8" :line-width="3">
			<tab-item selected @on-item-click="isShowGoods=true">商品</tab-item>
			<tab-item @on-item-click="isShowGoods=false">评价</tab-item>
		</tab>

		<main v-if='isShowGoods'>
			<ul ref='ul'>
				<li v-for="food in foods">{{food.name}}</li>
			</ul>
			<section ref='food'>
				<dl v-for='food in foods'>
					<dt class="fix">{{food.name}} <span class="r disc" >...</span></dt>
					<dd v-for='fos in food.foods'>
						<img :src="'//fuss10.elemecdn.com/' + climg(fos) + '?imageMogr/thumbnail/140x140/format/webp/quality/85'" />
						<div>
							<p class="ftit">
								{{fos.name}}
							</p>
							<p class="fdes">{{fos.description}}</p>
							<p class="satisfy"><span>月售{{fos.month_sales}}份</span> &nbsp; 好评率{{fos.satisfy_rate}}%</p>
							<p class="price">
								<span>
								￥<b style="font-size: 0.9rem;">{{fos.specfoods[0].price}}</b>
								</span>
								<i style="background:white ; color: #3190E8; font-size: 1.2rem;" class="fa fa-plus-circle r"></i>
							</p>
						</div>
					</dd>
				</dl>
			</section>
		</main>
		<div class="assess" v-else>
			hhhhhhh
		</div>
		<footer>
			<div></div>
		</footer>
	</div>
</template>

<script>
	import { Tab, TabItem } from 'vux'

	export default {
		name: 'shop',
		data() {
			return {
				id: this.$route.params.id,
				imgsrc: '',
				foodsrc: '',
				shops: '',
				num: '',
				foods: '',
				act: '',
				isShowGoods:true,
			}
		},
		components: {
			Tab,
			TabItem,

		},

		methods: {
			
			climg(aimg) {
				var arr = aimg.image_path.split('')
				arr.splice(3, 0, '/');
				arr.splice(1, 0, "/");
				var str = arr.join("");
				str = str.match('png') ? str + '.png' : str + '.jpeg'
				return str;

			},
			requests() {
				// 请求商家信息
				this.$http.get("/ele/shopping/restaurant/" + this.id + "?extras[]=activities&terminal=h5", {
					params: {
						latitude: 31.23037,
						longitude: 121.473701,
					}
				}).then(function(res) {
					var str = this.climg(res.data);
					this.imgsrc = '//fuss10.elemecdn.com/' + str + '?imageMogr/format/webp/';
					this.shops = res.data;
					this.num = res.data.activities.length;
					this.act = res.data.activities[0];
				}.bind(this));

				// 请求食物
				//https: //mainsite-restapi.ele.me/shopping/v2/menu?restaurant_id=553889
				this.$http.get('/ele/shopping/v2/menu?', {
					params: {
						restaurant_id: this.id
					}
				}).then(function(res) {
					this.foods = res.data;
					console.log(this.foods)
				}.bind(this));
			}

		},
		created() {
			this.requests();

		},
		mounted() {
			this.$refs.ul.onscroll = function() {

			}
			console.log();

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.root {
		height: 100vh;
		overflow-y: hidden;
	}
	
	ul,
	dl,
	dd {
		margin: 0;
		padding: 0;
	}
	
	a {
		color: white;
	}
	
	.pgroot {
		overflow-x: hidden;
	}
	
	header {
		padding: 0.6rem 10px;
		width: 100%;
		position: relative;
		font-size: 0.8rem;
		color: white;
	}
	
	.htop {
		display: flex;
		display: -webkit-flex;
		/*align-items: ;*/
	}
	
	.blur {
		background: no-repeat 100%;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: -5;
	}
	
	.blur:before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: rgba(119, 103, 137, .43);
	}
	
	header img {
		width: 95px;
		height: 95px;
		border: 1px solid #fff;
		border-radius: .106667rem;
	}
	
	.htit {
		flex: 1;
		display: flex;
		display: -webkit-flex;
		align-items: stretch;
		justify-content: space-around;
		flex-direction: column;
		color: white;
		padding: 0 5px;
	}
	
	.name {
		font-size: 1rem;
		padding: 0;
		margin: 0;
	}
	
	.deli {
		font-size: 0.75rem;
	}
	
	.info {
		font-size: 0.75rem;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	
	.icname {
		font-style: normal;
		background-color: rgb(112, 188, 70);
		border-color: rgb(112, 188, 70);
		font-size: 0.79rem;
	}
	
	.activitie {
		margin: 0.5rem 0 0;
	}
	
	.activitie .act {
		width: 70%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		margin: 0;
		padding: 0;
		display: inline-block;
	}
	
	main {
		display: flex;
		display: -webkit-flex;
		height: 600px;
	}
	
	main p {
		margin: 0;
		padding: 0;
	}
	
	ul {
		height: 100%;
		overflow: scroll;
		list-style: none;
		background-color: #f8f8f8;
		width: 6.5rem;
	}
	
	li {
		position: relative;
		padding: 1rem 0.5rem;
		border-bottom: 1px solid #ededed;
		font-size: .7rem;
		color: #666;
	}
	
	section {
		height: 100%;
		overflow: scroll;
		flex: 1;
	}
	
	section dt {
		padding: .8rem .5rem;
		background-color: #f1f1f1;
		font-weight: 700;
		font-size: .85rem;
		color: #666;
	}
	
	.disc {
		vertical-align: top;
		margin-top: -0.2rem;
		color: #dadad
	}
	
	section dd {
		display: flex;
		display: -webkit-flex;
		align-items: center;
		padding: 0.7rem 0.5rem;
	}
	
	dd img {
		flex: 2;
		width: 3.5rem;
		padding: 0 0.6rem;
	}
	
	dd div {
		flex: 8;
		display: flex;
		display: -webkit-flex;
		flex-direction: column;
	}
	
	dd:not(:last-child) {
		box-shadow: 0.4rem 0.013333rem 0 0 #ddd;
	}
	
	.ftit {
		font-size: 0.9rem;
		font-weight: bold;
	}
	
	.fdes {
		padding: 0.3rem 0;
		font-size: 0.5rem;
	}
	
	.satisfy {
		padding: 0.3rem 0;
		font-size: 0.55rem;
	}
	
	.price {
		color: #f60;
		font-size: 0.5rem;
	}
	
	footer {
		height: 30px;
		background: black;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
	}
</style>